<template>
  <div class="block">
    <el-timeline v-loading="isDataKoading">
      <el-timeline-item
        v-for="(item,index) of list"
        :key="index"
        :timestamp="item.create_time"
        placement="top"
      >
        <el-card>
          <div class="username">管理员：{{ item.username }} <span v-if="item.nickname">({{ item.nickname }})</span></div>
          <div class="action">执行操作：{{ item.action }}</div>
        </el-card>
      </el-timeline-item>
    </el-timeline>
    <pagination
      v-show="listQuery.total>0"
      :total="listQuery.total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      :auto-scroll="false"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { list } from '@/api/log'
import Pagination from '@/components/Pagination'
export default {
  components: {
    Pagination
  },
  props: {
    currentPage: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      list: [],
      listQuery: {
        page: 1,
        limit: 5,
        total: 0,
        where: [],
        sort: '-create_time'
      },
      isDataKoading: false
    }
  },
  watch: {
    'listQuery.page'(newValue) {
      this.$emit('onChange', newValue)
    },
    currentPage(newValue) {
      this.listQuery.page = newValue
      this.getList()
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.isDataKoading = true
      list(this.listQuery).then(({ status, data }) => {
        this.isDataKoading = false
        if (status) {
          this.list = data.data
          this.listQuery.total = data.total
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.username{
  margin: 10px 0 ;
  line-height: 20px;
}
</style>
